<!--  -->
<template>
    <div class="app-container">
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="支付方式" name="payment">
                <el-form :inline="true" size="small">
                    <el-form-item label="编号">
                        <el-input v-model="kwd1" placeholder="请输入编号" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="方式名称">
                        <el-input
                            v-model="kwd2"
                            placeholder="请输入支付方式名称"
                            size="small"
                        ></el-input>
                    </el-form-item>
                    <el-button icon="el-icon-search" type="primary" size="small" @click
                        >搜索</el-button
                    >
                    <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
                    <el-button icon="el-icon-edit" type="warning" size="small" @click="addP"
                        >新增</el-button
                    >
                    <el-button icon="el-icon-delete" type="danger" size="small" @click
                        >删除</el-button
                    >
                </el-form>

                <div>
                    <el-table :data="cate_list" border stripe>
                        <el-table-column type="selection" align="center" width="60" />
                        <template v-for="(col, index) in columns">
                            <el-table-column
                                :prop="col.data"
                                :key="col.id"
                                :label="col.label"
                                align="center"
                                :width="col.width"
                            ></el-table-column>
                        </template>
                        <el-table-column label="操作" align="center" width="270">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="addP(scope.$index, scope.row)"
                                    >编辑</el-button
                                >
                                <el-button
                                    type="text"
                                    icon="el-icon-delete"
                                    style="color: #f56c6c"
                                    @click="delP(scope.$index, scope.row)"
                                    >删除</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="page">
                    <el-pagination
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        :current-page.sync="pageData.page"
                        :page-sizes="[20, 40, 80, 100]"
                        :page-size="pageData.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        background
                    />
                </div>
            </el-tab-pane>
            <el-tab-pane label="会员卡订单" name="order">
                <el-form :inline="false" size="small">
                    <el-form-item label="编号">
                        <el-input v-model="kwd1" placeholder="请输入编号" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="会员卡名称">
                        <el-input
                            v-model="kwd2"
                            placeholder="请输入会员卡名称"
                            size="small"
                        ></el-input>
                    </el-form-item>

                    <el-button icon="el-icon-search" type="primary" size="small" @click
                        >搜索</el-button
                    >
                    <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
                    <el-button icon="el-icon-edit" type="warning" size="small" @click="addS"
                        >新增</el-button
                    >
                    <el-button icon="el-icon-delete" type="danger" size="small" @click
                        >删除</el-button
                    >
                </el-form>

                <div>
                    <el-table :data="cate_list" border stripe>
                        <el-table-column type="selection" align="center" width="60" />
                        <template v-for="(col, index) in columns2">
                            <el-table-column
                                :prop="col.data"
                                :key="col.id"
                                :label="col.label"
                                align="center"
                                :width="col.width"
                            ></el-table-column>
                        </template>
                        <el-table-column label="操作" align="center" width="270">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="addS(scope.$index, scope.row)"
                                    >编辑</el-button
                                >
                                <el-button
                                    type="text"
                                    icon="el-icon-delete"
                                    style="color: #f56c6c"
                                    @click="delS(scope.$index, scope.row)"
                                    >删除</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="page">
                    <el-pagination
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        :current-page.sync="pageData.page"
                        :page-sizes="[20, 40, 80, 100]"
                        :page-size="pageData.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        background
                    />
                </div>
            </el-tab-pane>
            <el-tab-pane label="会员卡设置" name="setting">
                <el-form :inline="false" size="small">
                    <el-form-item label="订单编号">
                        <el-input
                            v-model="kwd1"
                            placeholder="请输入订单编号"
                            size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="kwd2" clearable filterable placeholder="订单状态">
                            <el-option
                                v-for="item in sOpt"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-button icon="el-icon-search" type="primary" size="small" @click
                        >搜索</el-button
                    >
                    <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
                    <el-button icon="el-icon-delete" type="danger" size="small" @click
                        >删除</el-button
                    >

                    <el-button icon="el-icon-upload" type="warning" size="small" @click="addC"
                        >导出</el-button
                    >
                </el-form>

                <div>
                    <el-table :data="cate_list" border stripe>
                        <el-table-column type="selection" align="center" width="60" />
                        <template v-for="(col, index) in columns3">
                            <el-table-column
                                :prop="col.data"
                                :key="col.id"
                                :label="col.label"
                                align="center"
                                :width="col.width"
                            ></el-table-column>
                        </template>
                        <el-table-column label="操作" align="center" width="270">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    icon="el-icon-search"
                                    @click="addC(scope.row)"
                                    >查看</el-button
                                >
                                <el-button
                                    type="text"
                                    icon="el-icon-delete"
                                    style="color: #f56c6c"
                                    @click="delC(scope.$index)"
                                    >删除</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="page">
                    <el-pagination
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        :current-page.sync="pageData.page"
                        :page-sizes="[20, 40, 80, 100]"
                        :page-size="pageData.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        background
                    />
                </div>
            </el-tab-pane>
        </el-tabs>

        <!-- 添加支付方式 -->
        <el-dialog title="新增" :visible.sync="addPay" width="40%" @close="addPay = false">
            <el-form
                :model="createData"
                ref="form"
                :rules="rules"
                label-width="120px"
                :inline="false"
                size="normal"
            >
                <el-form-item label="编号">
                    <el-input v-model="createData.id" style="width: 220px" clearable></el-input>
                </el-form-item>
                <el-form-item label="支付方式名称">
                    <el-input v-model="createData.name" style="width: 220px" clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="addPay = false">取消</el-button>
                <el-button type="primary" @click>提交</el-button>
            </span>
        </el-dialog>
        <!-- 添加会员卡 -->
        <el-dialog
            title="新增"
            :visible.sync="createCard"
            width="40%"
            @close="createCard = false"
        >
            <el-form
                :model="createData"
                ref="form"
                :rules="rules"
                label-width="120px"
                :inline="true"
                size="normal"
            >
                <el-form-item label="编号">
                    <el-input v-model="createData.name" style="width: 220px" clearable></el-input>
                </el-form-item>
                <el-form-item label="会员卡名称">
                    <el-input v-model="createData.me" style="width: 220px" clearable></el-input>
                </el-form-item>
                <el-form-item label="会员卡价格">
                    <el-input v-model="createData.me" style="width: 220px" clearable></el-input>
                </el-form-item>
                <el-form-item label="会员卡信息">
                    <el-input v-model="createData.me" style="width: 220px" clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="createCard = false">取消</el-button>
                <el-button type="primary" @click>提交</el-button>
            </span>
        </el-dialog>
        <!-- 查看会员卡 -->
        <el-dialog title="查看" :visible.sync="showCard" width="40%" @close="showCard = false">
            <el-form
                :model="createData"
                ref="form"
                :rules="rules"
                label-width="120px"
                :inline="true"
                size="normal"
            >
                <div class="dBox">
                    <div class="dList">
                        <div class="dLabel">订单编号</div>
                        <div class="dCon">订单编号</div>
                    </div>
                    <div class="dList">
                        <div class="dLabel">订单类型</div>
                        <div class="dCon">月卡</div>
                    </div>
                    <div class="dList">
                        <div class="dLabel">下单手机号</div>
                        <div class="dCon">1767283474</div>
                    </div>
                    <div class="dList">
                        <div class="dLabel">订单总额</div>
                        <div class="dCon">198元</div>
                    </div>
                </div>
            </el-form>
            <span slot="footer">
                <el-button @click="showCard = false">取消</el-button>
                <el-button type="primary" @click>提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    createCategory,
    categoryDetail,
    updateCategory,
    deleteCategory,
    categoryList,
} from "@/api/article";
export default {
    data () {
        return {
            activeName: "payment",
            kwd1: "",
            kwd2: "",
            msgApi: "",
            createData: {},
            addPay: false,
            createCard: false,
            showCard: false,
            showAdd: false,
            showEdit: false,
            showDetail: false,
            rules: {},
            i: "", //cate_id
            updateData: {},
            pageData: {
                page: 1,
                limit: 10,
            },
            total: 10,
            cate_list: [],
            sOpt: [
                {
                    label: "未核销",
                    value: "1",
                },
                {
                    label: "已核销",
                    value: "2",
                },
                {
                    label: "已付款",
                    value: "3",
                },
                {
                    label: "待发货",
                    value: "4",
                },
                {
                    label: "交易完成",
                    value: "5"
                }
            ],
            columns: [
                { key: 0, label: `编号`, data: "id", width: 180 },
                { key: 1, label: `支付方式名称`, data: "name" },
            ],
            columns2: [
                { key: 0, label: `编号`, data: "id", width: 180 },
                { key: 1, label: `会员卡名称`, data: "name" },
                { key: 1, label: `会员卡价格`, data: "price" },
                { key: 1, label: `会员卡信息`, data: "info" },
            ],
            columns3: [
                { key: 0, label: `订单编号`, data: "id", width: 180 },
                { key: 1, label: `订单类型`, data: "type" },
                { key: 1, label: `下单手机号`, data: "phone" },
                { key: 1, label: `订单总额`, data: "total" },
                { key: 1, label: `订单状态`, data: "status" },
            ],
        };
    },
    created () {
        this.getCategoryList();
    },
    methods: {
        getCategoryList () {
            categoryList().then((r) => {
                if (r.code == "200") {
                    this.cate_list = r.data.rows;
                    console.log(this.cate_list);
                } else {
                    this.$message.error(r.msg);
                }
            });
        },
        addP () {
            // 新增支付方式
            this.addPay = true;
        },
        addS () {
            // 新增会员卡设置
            this.createCard = true;
        },
        addC () {
            // 新增会员卡订单
            this.showCard = true;
        },
        edit (i) {
            this.showEdit = true;
            this.updateData = this.cate_list[i];
        },
        detail (i) {
            this.i = i;
            this.showDetail = true;
        },
        createCategory () {
            createCategory(this.createData).then((r) => { });
        },
        getCategoryDetail () {
            categoryDetail().then((r) => {
                console.log(r);
            });
        },
        updateCategory (i) {
            updateCategory(this.updateData).then((r) => {
                console.log(r);
            });
        },
        deleteCate (i) {
            deleteCategory(this.cate_list[i].id).then((r) => {
                console.log(r);
            });
        },
        beforeCoverUpload () { },

        sizeChange (a) {
            this.pageData.limit = a;
            this.getCategoryList();
        },
        currentChange (a) {
            this.pageData.page = a;
            this.getCategoryList();
        },
    },
};
</script>
<style>
.sok {
    color: #5cb87a;
    width: 60px;
    margin: 0 auto;
    border: 1px solid #5cb87a;
    background: #fff;
    border-radius: 5px;
}
.sfail {
    color: #f56c6c;
    width: 60px;
    margin: 0 auto;
    border: 1px solid #f56c6c;
    background: #fff;
    border-radius: 5px;
}
.btnBox {
    height: 130px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}
.btnBox .el-button {
    margin: 0;
}
.detailLog div {
    margin: 10px;
    color: #000;
    font-size: 16px;
}
.detailLog .dbox {
    display: flex;
    flex-wrap: wrap;
}
.detailLog .dbox > div {
    width: 46%;
    margin: 10px 0;
}
</style>
